<template>
  <div class="dormitory-container">
    <!-- 统计卡片区域 - 增加动画效果 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="(dorm, index) in dormitoryStats" :key="dorm.name">
        <el-card :class="['stat-card', `stat-card-${index + 1}`]">
          <template #header>
            <div class="card-header">
              <el-icon>
                <House />
              </el-icon>
              <span>{{ dorm.name }}</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-number animate__animated animate__fadeInUp">{{ dorm.total }}</div>
            <div class="card-label">总床位</div>
            <div class="card-subtext">
              <span class="occupied">已住: {{ dorm.occupied }}</span>
              <div class="divider"></div>
              <span class="available">空闲: {{ dorm.available }}</span>
            </div>
            <div class="usage-rate">
              使用率: {{ ((dorm.occupied / dorm.total) * 100).toFixed(1) }}%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格区域 - 优化样式 -->
    <el-card class="table-card">
      <el-table :data="dormitoryList" v-loading="loading" border stripe :header-cell-style="headerStyle"
        highlight-current-row>
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="detail-info">
              <div class="info-item">
                <el-icon>
                  <Location />
                </el-icon>
                <span>位置: {{ row.building }} {{ row.room_number }}室</span>
              </div>
              <div class="info-item">
                <el-icon>
                  <User />
                </el-icon>
                <span>宿管: {{ row.manager || '暂无' }}</span>
              </div>
              <div class="info-item">
                <el-icon>
                  <Phone />
                </el-icon>
                <span>联系电话: {{ row.phone || '暂无' }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column type="index" label="#" width="60" align="center">
          <template #default="scope">
            <div class="index-cell">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="building" label="宿舍楼" align="center" width="120">
          <template #default="{ row }">
            <el-tag :type="getBuildingType(row.building)">{{ row.name }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="房间号" align="center" width="200" />

        <el-table-column prop="capacity" label="床位数" align="center" width="120">
          <template #default="{ row }">
            <el-progress :percentage="row.capacity / 10 * 100" :format="format" :status="getProgressStatus(row)" />
          </template>
        </el-table-column>

        <el-table-column label="宿舍容量" align="center">
          <template #default="{ row }">
            <el-tag class="mx-1" :type="getRandomType()" effect="light">
              {{ row.capacity }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ }">
            <el-button-group>
              <el-button type="danger" :icon="Delete" size="small" disabled>删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { House, Delete, Location, User, Phone } from '@element-plus/icons-vue'
import { getDormitorieListAPI } from '@/api/dormitorie'
onMounted(() => {
  getDormitorieList()
})

// 获取宿舍列表数据
const getDormitorieList = async () => {
  const { data: res } = await getDormitorieListAPI()
  console.log(res);
  if (res.status !== 0) {
    // eslint-disable-next-line no-undef
    return ElMessage.error('获取宿舍列表失败')
  }
  dormitoryList.value = res.data

}
// 宿舍楼统计数据
const dormitoryStats = [
  { name: '义苑', total: 300, occupied: 280, available: 20 },
  { name: '爱苑', total: 280, occupied: 250, available: 30 },
  { name: '信苑', total: 320, occupied: 300, available: 20 },
  { name: '平苑', total: 260, occupied: 240, available: 20 }
]

// 宿舍列表数据
const dormitoryList = ref([])
const loading = ref(false)

// 获取宿舍楼标签类型
const getBuildingType = (building) => {
  const types = {
    '义苑': 'success',
    '爱苑': 'warning',
    '信苑': 'info',
    '诚苑': 'danger'
  }
  return types[building] || ''
}

// 获取进度条状态
const getProgressStatus = (row) => {
  const percentage = (row.occupied / row.capacity) * 100
  if (percentage >= 90) return 'exception'
  if (percentage >= 70) return 'warning'
  return 'success'
}

// 格式化进度条文字
const format = (percentage) => `${percentage}%`

// 随机标签类型
const getRandomType = () => {
  const types = ['', 'success', 'warning', 'info', 'danger']
  return types[Math.floor(Math.random() * types.length)]
}

// 添加表格头部样式
const headerStyle = {
  background: '#f5f7fa',
  color: '#606266',
  fontWeight: 500,
  fontSize: '14px',
  textAlign: 'center',
  height: '50px',
  padding: '0',
  borderBottom: '2px solid #EBEEF5'
}
</script>

<style scoped>
.dormitory-container {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 16px;
  transition: all 0.3s;
  overflow: hidden;
  animation: float 6s ease-in-out infinite;
}

.stat-card-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation-delay: 0s;
}

.stat-card-2 {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5e9 100%);
  animation-delay: 1.5s;
}

.stat-card-3 {
  background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
  animation-delay: 3s;
}

.stat-card-4 {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  animation-delay: 4.5s;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header .el-icon {
  font-size: 24px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 12px;
}

.card-header span {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.card-content {
  padding: 20px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 15px;
}

.card-subtext {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}

.usage-rate {
  margin-top: 15px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}

.divider {
  width: 2px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 10px;
}

.table-card {
  background: white;
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.add-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 24px;
  transition: all 0.3s;
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.2);
}

.index-cell {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-tag) {
  margin: 4px;
  transition: all 0.3s;
}

:deep(.el-tag:hover) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
  transition: width 0.6s ease;
}

:deep(.el-button-group .el-button) {
  margin-left: 0;
}

.detail-info {
  padding: 20px;
  background: linear-gradient(to right, #f6f8ff, #f0f3ff);
  border-radius: 8px;
  margin: 10px;
  display: flex;
  gap: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.info-item .el-icon {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 8px;
  border-radius: 8px;
}

/* 表格样式优化 */
:deep(.el-table__expanded-cell) {
  background: #f8faff;
}

:deep(.el-table__row) {
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  background: linear-gradient(to right, #f6f8ff, #f0f3ff) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

:deep(.el-progress) {
  margin: 10px 0;
}

:deep(.el-progress-bar__inner) {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加表格头部样式 */
.headerStyle {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 500;
}

/* 动画效果 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>
